import './index.less'
import TextArea from "antd/es/input/TextArea.js";
import {Button, message} from "antd";
import {
    CloseOutlined,
    EllipsisOutlined,
    ExpandOutlined,
    FolderOpenOutlined, MessageOutlined,
    MinusOutlined, PhoneOutlined, PlayCircleOutlined, ScissorOutlined,
    SmileOutlined
} from "@ant-design/icons";
import MessageForm from "./components/MessageForm/index.jsx";
import MessageTo from "./components/MessageTo";
import {useSelector} from "react-redux";
import {useEffect, useState} from "react";
import {sendMessage} from "@/libs/WebSocket.js";

const showTips = (msg) => {
    message.info(msg + ', 暂时没有这个功能哟~')
}

const ListColumn = () => {
    const state = useSelector(state => state)
    let [content, contentChange] = useState()

    let userCount = 0

    if (state.userList) {
        userCount = state.userList.length
    }

    const send = () => {
        sendMessage(content)

        contentChange(null)
    }

    let messageList = []

    if (state.messageList) {
        messageList = state.messageList
    }
    const goButton = () => {
        let element = document.getElementById("message-body");
        if (element) {
            element.scrollTop = element.scrollHeight;
        }
    }

    useEffect(() => goButton())

    return (
        <div className="content-container">
            <div className="content-header flex justify-between">
                <div className="h-full flex items-center text-lg font-medium pl-5">
                    群聊 ({userCount})
                </div>
                <div>
                    <div className="flex">
                        <div className="px-2 py-1 cursor-pointer hover:bg-gray-200"
                             onClick={() => showTips('窗口最小化')}>
                            <MinusOutlined/>
                        </div>
                        <div className="px-2 py-1 cursor-pointer hover:bg-gray-200"
                             onClick={() => showTips('窗口最大化')}>
                            <ExpandOutlined/>
                        </div>
                        <div className="px-2 py-1 cursor-pointer hover:bg-red-400"
                             onClick={() => showTips('窗口关闭')}>
                            <CloseOutlined/>
                        </div>
                    </div>
                    <div className="flex justify-end px-2 py-1 cursor-pointer">
                        <EllipsisOutlined/>
                    </div>
                </div>
            </div>
            <div className="content-body overflow-auto" id="message-body">
                {
                    messageList.map((message, index) =>
                        message.message_from === state.userId
                            ? <MessageTo key={index} username={message.name} message={message.message}></MessageTo>
                            : <MessageForm key={index} username={message.name} message={message.message}></MessageForm>
                    )
                }
            </div>
            <div className="content-footer px-7 py-3">
                <div className="flex justify-between">
                    <div className="flex">
                        <div>
                            <SmileOutlined title="表情"
                                           className="text-lg mr-4 !text-dark-50 cursor-pointer"
                                           onClick={() => showTips('表情(Win + .)')}/>
                        </div>
                        <div>
                            <FolderOpenOutlined title="发送文件"
                                                className="text-lg mr-4 !text-dark-50 cursor-pointer"
                                                onClick={() => showTips('发送文件')}/>
                        </div>
                        <div>
                            <ScissorOutlined title="截图(Alt + A)"
                                             className="text-lg mr-4 !text-dark-50 cursor-pointer"
                                             onClick={() => showTips('截图')}/>
                        </div>
                        <div>
                            <MessageOutlined title="聊天记录"
                                             className="text-lg mr-4 !text-dark-50 cursor-pointer"
                                             onClick={() => showTips('聊天记录')}/>
                        </div>
                    </div>

                    <div className="flex">
                        <div>
                            <PlayCircleOutlined title="直播"
                                                className="text-lg !text-dark-50 cursor-pointer"
                                                onClick={() => showTips('直播')}/>
                        </div>
                        <div>
                            <PhoneOutlined title="语音聊天"
                                           className="text-lg ml-4 !text-dark-50 cursor-pointer"
                                           onClick={() => showTips('语音聊天')}/>
                        </div>
                    </div>
                </div>

                <TextArea className="diy-text-area"
                          value={content}
                          onChange={(e) => contentChange(e.target.value)}></TextArea>
                <div className="flex justify-end">
                    <Button className="send-btn cursor-pointer" onClick={() => send()}>发送(S)</Button>
                </div>
            </div>
        </div>
    )
}

export default ListColumn
